<template>
  <div
    class="source"
    v-loading="pageLoading"
    element-loading-text="loading"
  >
    <div class="newPageTitle">
      <span class="backIcon" @click="closeDrawer">
        <i class="el-icon-back"></i>
      </span>
      <h1 style="display: inline-block; margin-left: 10px">配置数据权限</h1>
    </div>
    <el-form
      :model="editData"
      :rules="rules"
      ref="editRole"
      label-width="110px"
      size="small"
      class="updateForm"
    >
      <el-form-item label="账号" prop="employeeNo">
        <el-input
          v-model="editData.employeeNo"
          placeholder="账号"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="员工编号" prop="employeeId">
        <el-input
          v-model="editData.employeeId"
          placeholder="员工编号"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="用户编号" prop="userId">
        <el-input
          v-model="editData.userId"
          placeholder="用户编号"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="editData.userName"
          placeholder="用户名称"
          disabled
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="账号类型" prop="accountType">
        <el-input
          v-model="editData.accountType"
          placeholder="账号类型"
          disabled
        ></el-input>
      </el-form-item> -->
      <el-form-item label="账号类型">
        <el-select v-model="editData.accountType" disabled placeholder="账号类型" popper-class="select-class" :popper-append-to-body="false">
          <el-option label="全部" value></el-option>
            <el-option
              v-for="item in lookupItems.ACCOUNTTYPE"
              :key="item.id"
              :label="item.dicName"
              :value="item.dicCode"
            ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="menu2bids">
        <span slot="label">
          <span style="color: #f56c6c">*&nbsp;</span>
          数据权限
        </span>
        <el-checkbox
          class="select-all"
          label="全选"
          v-model="selectAll"
          @change="selectAllChange"
        ></el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in allRoleData" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div class="footer">
      <div class="footer-btn">
        <el-button @click="closeDrawer" class="reset-btn">
          取消
        </el-button>
        <el-button @click="saveEdit('editRole')" class="search-btn">
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { searchSingleRole, editRoleSave, addRoleSave } from '@/api/role'
import { editDataRoleSave, getAllDataRole } from '@/api/role'
import { setRouterParams, getRouterParams } from '@/utils/auth'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
export default {
  name: 'checkDateRole',
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      selectAll: false,
      pageLoading: false,
      paramsId: '',
      editData: {},
      allRoleData: [],
      checkedCities: [],
      rules: {
        roleName: [
          {
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          }
        ],
        roleCode: [
          {
            required: true,
            message: '请输入角色Code',
            trigger: 'blur'
          }
        ]
      },
      defaultProps: {
        id: 'id',
        children: 'children',
        label: function (data, node) {
          return data.text
        }
      },
      isUpdate: false,
      allDataRoleList: [],
      treeChangeData: [],
      accessIdList: []
    }
  },

  // 监听editData的数据变化
  watch: {
    checkedCities: {
      handler () {
        this.isUpdate = true
      },
      deep: true
    }
  },

  mounted () {
    // this.pageLoading = true
    const id = this.$route.params.id
    this.isUpdate = false
    if (id) {
      setRouterParams(this.$route)
      this.paramsId = id.userId
      this.getAllRole()
    } else {
      const routeParams = getRouterParams(this.$route)
      this.paramsId = routeParams.id.userId
      this.getAllRole()
    }
  },

  methods: {
    // 查询菜单权限树
    getAllRole () {
      getAllDataRole(this.paramsId).then(response => {
        // 调用接口保存新增修改attribute
        const data = response
        if (data) {
          if (Number(data.code) === 1) {
            this.allDataRoleList = data.obj.allPermissionList
            this.editData = data.obj.user
            data.obj.allPermissionList.forEach(e => {
              this.allRoleData.push(e.accessName)
            })
            data.obj.userDataPermissionList.forEach(e => {
              this.accessIdList.push(e.accessId)
              this.checkedCities.push(e.accessName)
            })
            if (data.obj.userDataPermissionList.length === data.obj.allPermissionList.length) {
              this.selectAll = true
            }
          } else {
            this.$confirm(this.$t(data.code), {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },
    selectAllChange (val) {
      this.accessIdList = []
      if (val) {
        this.allDataRoleList.forEach(data => {
          this.accessIdList.push(data.accessId)
        })
        this.checkedCities = this.allRoleData
      } else {
        this.checkedCities = []
        this.accessIdList = []
      }
    },
    handleCheckedCitiesChange (value) {
      this.accessIdList = []
      value.forEach(e => {
        this.allDataRoleList.forEach(data => {
          if (e === data.accessName) {
            this.accessIdList.push(data.accessId)
          }
        })
      })
      const checkedCount = value.length
      this.selectAll = checkedCount === this.allRoleData.length
    },
    // 初始化add页面数据
    initpage () {
      this.pageLoading = true
      // 初始页面值
      this.editData = {
        menu2bids: []
      }
      // 向子组件传递组织语言、以编辑的语言内容（新增是传''即可）、语言value的key值
      this.pageLoading = false
    },

    // 保存数据操作
    saveEdit () {
      const params = {
        userId: this.paramsId,
        accessIdList: this.accessIdList
      }
      this.pageLoading = true
      editDataRoleSave(params).then(response => {
        // 调用接口保存新增修改attribute
        const data = response
        if (data) {
          if (Number(data.code) === 1) {
            this.$confirm('操作成功', '', {
              confirmButtonText: '确定',
              showCancelButton: false
            }).then(() => {
              this.$router.push({
                name: 'userinfo'
              })
            })
          } else {
            this.$confirm(data.messageCode, {
              confirmButtonText: 'OK',
              showCancelButton: false
            })
          }
          this.pageLoading = false
        }
      })
        .catch(() => {
          this.$confirm('提交错误', {
            confirmButtonText: 'OK',
            showCancelButton: false
          })
          this.pageLoading = false
        })
    },

    // 关闭页面操作（cancel）
    closeDrawer () {
      if (this.isUpdate) {
        this.$confirm('确定离开此页面？如果离开，更改将丢失', '', {
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.$router.push({ name: 'userinfo' })
          })
          .catch(() => { })
      } else {
        this.$router.push({ name: 'userinfo' })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 /deep/ .el-checkbox__label {
  font-size: 1.3rem !important
}
 /deep/ .el-form-item__label {
  width: 80px !important;
  text-align: left;
}
 /deep/ .el-form-item__content {
  margin-left: 80px !important;
}
.cateBox {
  display: inline-block;
  border: 1px solid #979797;
  padding: 5px 10px;
  min-width: 40%;
  .el-tag {
    margin-right: 10px;
  }
}
</style>
